<style scoped>
.outer {
  position: relative;
  height: 460px;
}
.toolbar {
  width: 100%;
  position: relative;
  z-index: 10001;
}
.text {
  border: 1px solid #ccc;
  height: 400px;
}
.boxerl {
  position: relative;
  width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  height: 320px;
}
.boxerh {
  z-index: 120;
  top: 66px;
  position: absolute;
  width: 100%;
  height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
}
.scollbar {
  width: 100%;
  overflow-x: auto;
}
.blankinner {
  width: 768px;
  height: 5px;
  border: 1px solid white;
}
</style>
<template>
  <div>
    <Modal
      :value="modalState"
      :title="title"
      :loading="loading"
      ok-text="保存"
      @on-ok="handleSubmit"
      @on-cancel="cancel"
      width="50%">
      <Form
        ref="graphicModal"
        :model="row"
        :rules="ruleInline"
        style="width: 100%"
        :label-width="120">
        <FormItem prop="type" label="展示类型：" style="width: 300px">
          <div>图文</div>
        </FormItem>
        <FormItem prop="name" label="标题：" style="width: 300px">
          <Input type="text" :maxlength="30" v-model="row.name" placeholder="请输入标题(30字以内)" />
        </FormItem>
        <FormItem prop="subtitle" label="分享内容副标题：" style="width: 300px">
          <Input type="text" :maxlength="50" v-model="row.subtitle" placeholder="请输入副标题(50字以内)" />
        </FormItem>
        <div style="margin-left: 40px;">
          <span style="color: red">*</span>
          页面图片：
        </div>
        <FormItem prop="img" style="width: 315px">
          <upload-img @upload-success="handleUpload" :folder="folder" :row="row"></upload-img>
          <div style="color: red">提示：请上传大小小于500kb的图片!</div>
        </FormItem>
        <FormItem prop="parseURL" label="是否从秀米导入：" style="width: 300px">
          <Checkbox v-model="row.parseURL" value="1">是
          </Checkbox>
        </FormItem>
        <div style="margin-left: 40px;">
          <span style="color: red">*</span>
          内容编辑：
        </div>
        <FormItem prop="content" style="width: 100%">
          <div ref="editor" style="text-align:left">
          </div>
          <div class="outer">
            <div id="scoller" class="scollbar" @scroll="doThis()">
              <div class="blankinner"></div>
            </div>
            <div id="inner" class="boxerl">
              <div id="div1" class="toolbar">
                <Button icon="md-trash" size="large" style="border: none; margin-top: -3px" @click="handleClear"></Button>
              </div>
            </div>
            <div class="boxerh">
              <div id="div2" class="text">
              </div>
            </div>
          </div>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
import {
  mapActions,
  mapState
} from 'vuex'
import UploadImg from '_c/upload-img'
import { getToken } from '../../libs/util'
import E from 'wangeditor'
export default {
  name: 'GraphicModal',
  components: {
    UploadImg
  },
  props: {
    modalState: Boolean
  },
  data () {
    return {
      title: '',
      loading: true,
      editor: null,
      folder: 'task',
      actionUrl: '',
      content: '',
      imgUrl: '',
      token: getToken(),
      editorContent: '',
      ruleInline: {
        name: [
          { required: true, message: '请输入标题!', trigger: 'blur' }
        ],
        subtitle: [
          { required: true, message: '请输入分享内容副标题!', trigger: 'blur' }
        ]
      }
    }
  },
  updated () {
    if (this.row.id && this.row.id !== '') {
      this.title = '编辑图文列表'
    } else {
      this.title = '添加图文列表'
    }
  },
  computed: {
    ...mapState({
      graphicList: state => state.graphic.graphicList,
      row: state => state.graphic.row
    })
  },
  methods: {
    ...mapActions(['updateModalState']),
    changeLoading () {
      this.loading = false
      this.$nextTick(() => {
        this.loading = true
      })
    },
    doThis () {
      var elem = document.getElementById('scoller')
      var inner = document.getElementById('inner')
      inner.scrollLeft = elem.scrollLeft
    },
    handleSubmit () {
      this.$refs.graphicModal.validate((valid) => {
        if (!valid) {
          return this.changeLoading()
        }
        this.$emit('graphic-valid', {
          id: this.row.id,
          type: 1,
          name: this.row.name,
          subtitle: this.row.subtitle,
          parseURL: this.row.parseURL ? this.row.parseURL : '',
          content: this.editorContent ? this.editorContent : this.row.content,
          img: this.imgUrl
        })
      })
    },
    cancel () {
      this.updateModalState(false)
      this.$refs['graphicModal'].resetFields()
    },
    handleUpload (url) {
      this.imgUrl = url
    },
    handleClear () {
      this.editor.txt.clear()
    }
  },
  created () {
    window.addEventListener('scroll', this.doThis)
  },
  mounted () {
    let self = this
    this.actionUrl = process.env.NODE_ENV === 'development' ? '/api/upload?folder=task' : 'http://rbackapi.baisha.work/upload?folder=task'
    this.editor = new E('#div1', '#div2')
    this.editor.customConfig.onchange = (html) => {
      this.editorContent = html
    }
    this.editor.customConfig.withCredentials = true
    this.editor.customConfig.uploadImgServer = this.actionUrl
    this.editor.customConfig.uploadImgMaxSize = 500 * 1024
    this.editor.customConfig.uploadImgHeaders = {
      'agent': 'Web',
      'token': this.token
    }
    this.editor.customConfig.uploadImgHooks = {
      before (xhr, editor, files) {

      },
      success (xhr, editor, result) {

      },
      fail (xhr, editor, result) {

      },
      error (xhr, editor) {

      },
      timeout (xhr, editor) {

      },
      customInsert (insertImg, result, editor) {
        if (result.state === '000') {
          let url = result.host + result.data
          insertImg(url)
        }
      }
    }
    this.editor.customConfig.customAlert = function (info) {
      self.$Notice.warning({
        title: '文件大小不正确',
        desc: '请上传500kb以下大小的图片'
      })
    }
    this.editor.customConfig.pasteFilterStyle = false
    this.editor.create()
    this.editor.txt.html(this.row.content)
  }
}
</script>
